<template>
	<view class="">
		<form @submit="formSubmit">
					<scroll-view scroll-y>
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									年级
								</view>
							</view>
							<view class="right">
								<picker @change="gradeChange" :value="gradeIndex" :range="gradeArray" name="grade">
									<view class="uni-input">{{gradeArray[gradeIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学号
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="studyNo" placeholder="输入学号" :value="studyNo" disabled/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									姓名
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="fullName" placeholder="输入姓名" :value="fullName"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									
								</view>
								<view class="text">
									曾用名
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="beforeFullName" placeholder="输入曾用名" :value="beforeFullName"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									姓名拼音
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="namePy" placeholder="输入姓名拼音" :value="namePy"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									英文名称
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="englishName" placeholder="输入英文名称" :value="englishName"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									身高
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="height" placeholder="输入身高" :value="height"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									体重
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="weight" placeholder="输入体重" :value="weight"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									血型
								</view>
							</view>
							<view class="right">
								<picker @change="bloodTypeChange" :value="bloodTypeIndex" :range="bloodTypeArray" name="bloodType">
									<view class="uni-input">{{bloodTypeArray[bloodTypeIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									证件类型
								</view>
							</view>
							<view class="right">
								<picker @change="certificateChange" :value="certificateIndex" :range="certificateIndexArray" name="certificate">
									<view class="uni-input">{{certificateIndexArray[certificateIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
					
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									证件号码
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="idCard" placeholder="输入证件号码" :value="idCard"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									健康状况
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="healthStatus" placeholder="输入健康状况" :value="healthStatus"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									出生地
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="birthplace" placeholder="输入出生地" :value="birthplace"/>
										
							</view>
						</view>
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									户口地
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="registeredAddress" placeholder="输入户口地" :value="registeredAddress"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									户口在校
								</view>
							</view>
							<view class="right">
								<picker @change="registrationInSchoolChange" :value="registrationInSchoolIndex" :range="registrationInSchoolArray" name="registrationInSchool">
									<view class="uni-input">{{registrationInSchoolArray[registrationInSchoolIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									现役军人
								</view>
							</view>
							<view class="right">
								<picker @change="isSoldierChange" :value="isSoldierIndex" :range="isSoldierArray" name="isSoldier">
									<view class="uni-input">{{isSoldierArray[isSoldierIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									是否侨属
								</view>
							</view>
							<view class="right">
								<picker @change="overseasChineseChange" :value="overseasChineseIndex" :range="overseasChineseArray" name="overseasChinese">
									<view class="uni-input">{{overseasChineseArray[overseasChineseIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									出生年月
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="dateChange" :value="date" name="date" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{date}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									性别
								</view>
							</view>
							<view class="right">
								<picker @change="sexChange" :value="sexIndex" :range="sexArray" name="sex">
									<view class="uni-input">{{sexArray[sexIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									婚否
								</view>
							</view>
							<view class="right">
								<picker @change="marriageChange" :value="marriageIndex" :range="marriageArray" name="marriage">
									<view class="uni-input">{{marriageArray[marriageIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									民族
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="nationality" placeholder="输入民族" :value="nationality"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									政治面貌
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="politicalStatus" placeholder="输入政治面貌" :value="politicalStatus"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入党日期
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="partyDateChange" :value="partyDate" name="partyDate" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{partyDate}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									入团日期
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="teamDateChange" :value="teamDate" name="teamDate" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{teamDate}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>				
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									籍贯
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="nativePlace" placeholder="输入籍贯" :value="nativePlace"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									国家/地区
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="country" placeholder="输入国家/地区" :value="country"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									宗教信仰
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="religion" placeholder="输入宗教信仰" :value="religion"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									家庭经济困难
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="fEconomy" placeholder="请输入" :value="fEconomy"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									档案在校
								</view>
							</view>
							<view class="right">
								<picker @change="studentSourceChange" :value="studentSourceIndex" :range="studentSourceArray" name="studentSource">
									<view class="uni-input">{{studentSourceArray[studentSourceIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									备注
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="notes" placeholder="输入备注" :value="notes"/>
										
							</view>
						</view>
						
						
						
						
						
						
						
				</scroll-view>		
						<view class="uni-btn-v">
							<button form-type="submit" class="but">确认提交</button>
						
						</view>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const gradeArray =ref(['请选择年级','大一','大二','大三','大四','研一']);
const gradeIndex =ref(0);
const studyNo =ref(5461321321);//学号
const fullName =ref('');//姓名
const beforeFullName =ref('');//曾用名
const namePy =ref('');//姓名拼音
const englishName =ref('');//英文姓名
const height =ref('');//高
const weight =ref('');//重
const bloodTypeArray = ref(['请选择血型','A','B','AB','O','RH']);//血型
const bloodTypeIndex = ref(0);
const certificateIndexArray = ref(['请选择证件类型','身份证','护照','港澳通行证']);//证件类型
const certificateIndex = ref(0);
const idCard = ref('');
const healthStatus = ref('');//健康状况
const birthplace = ref('');//出生地
const registeredAddress = ref('');//户口地
const registrationInSchoolArray = ref(['请选择','否','是']);//户口在校
const registrationInSchoolIndex = ref(0);
const isSoldierArray = ref(['请选择','否','是']);//是否现役军人
const isSoldierIndex = ref(0);
const overseasChineseArray = ref(['请选择','否','是']);//是否侨属
const overseasChineseIndex = ref(0);
const date =ref('0000-00-00');//出生日期
const partyDate =ref('0000-00-00');//入党日期
const teamDate =ref('0000-00-00');//入团日期
const sexArray = ref(['请选择性别','男','女']);//性别
const sexIndex = ref(0);
const marriageArray = ref(['请选择','否','是']);//婚否
const marriageIndex = ref(0);
const nationality = ref('汉');//民族
const politicalStatus =ref('');//政治面貌
const nativePlace = ref('');//籍贯
const country = ref('');//国家/地区·
const religion = ref('');//宗教信仰
const fEconomy = ref('');//家庭经济困难
const notes = ref('');//备注
const studentSourceArray = ref(['请选择','否','是']);//档案是否在校
const studentSourceIndex = ref(0);
const data = ref({});//提交数据

const formSubmit = (e)=>{
	console.log(e);
	console.log(e.detail.value);
	data.value = e.detail.value;
	console.log(data.value);
	data.value.grade = gradeArray.value[gradeIndex.value];
	console.log(data.value);
}


//年级选择
const gradeChange = (e)=>{
	
	gradeIndex.value = e.detail.value;
	
	
}


// 证件类型选择
const certificateChange = (e)=>{
	
	certificateIndex.value = e.detail.value;
}

// 户口在校选择
const registrationInSchoolChange = (e)=>{
	
	registrationInSchoolIndex.value = e.detail.value;
}

// 现役军人选择
const isSoldierChange = (e)=>{
	
	isSoldierIndex.value = e.detail.value;
}

// 侨属选择
const overseasChineseChange = (e)=>{
	
	overseasChineseIndex.value = e.detail.value;
}


// 出生日期选择
const dateChange = (e)=>{
	
	date.value = e.detail.value;
}

// 入党日期选择
const partyDateChange = (e)=>{
	
	partyDate.value = e.detail.value;
}

// 入团日期选择
const teamDateChange = (e)=>{
	
	teamDate.value = e.detail.value;
} 

// 性别选择
const sexChange = (e)=>{
	
	sexIndex.value = e.detail.value;
}

//婚姻选择
const marriageChange = (e)=>{
	
	marriageIndex.value = e.detail.value;
}

//档案在校选择
const studentSourceChange = (e)=>{
	
	studentSourceIndex.value = e.detail.value;
}	

//血型选择
const bloodTypeChange = (e)=>{
	
	bloodTypeIndex.value = e.detail.value;
}
</script>

<style lang='scss' scoped>
	 scroll-view{
	 	height:73vh;
	 	padding: 20rpx 0;
	 }
	 .rows{
	 	display: flex;
	 	justify-content: space-between;
	 	font-size: 26rpx;
	 	line-height: 60rpx;
	 	border-bottom: 1rpx solid #ccc;
	 	margin-bottom: 20rpx;
	 	.left{
	 		display: flex;
	 		justify-content: space-between;
	 		.star{
	 			color:red;
	 		}
	 	}
	 	.right{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		text-align: right;
	 		color:$xx-color-body;
	 	}
	 }
	 
	 .but{
	 			width: 500rpx;
	 			height: 80rpx;
	 			border-radius: 40rpx;
	 			background: $xx-color-body;
	 			color: #fff;
				
	 }
	 button::after{ border: none;}
	 button{
	 	line-height:80rpx;
	 }      
</style>